<template>
    <div id="my-introduction">
        <!-- 我的简历 -->
        <div class="deposit-content">
            <div class="top-bg">
                <van-nav-bar class="header" fixed :border="false" @click-left="diffBack">
                        <div class="left"
                            slot="left">
                            <van-icon name="arrow-left"
                                    size="24px"
                                    color="#fff" />
                        </div>
                        <div class="title"
                            slot="title">{{title}}</div>
                        <!-- <div class="right" slot="right">取消</div> -->
                    </van-nav-bar>
            </div>
            <div class="reset-wrapper">
                <div class="reset-content">
                    <van-cell title="技能标签" size="large" is-link :value="tages?tages:'添加标签'" :value-class="tages?'value-active':''" to="skillTages" style="margin-bottom: 0.24rem; border-radius: 0.1rem;"/>
                    <van-cell title="擅长空间" size="large" is-link :value="spaces?spaces:'添加标签'" :value-class="spaces?'value-active':''"  to="goodatSpace" style="margin-bottom: 0.24rem; border-radius: 0.1rem;"/>
                    <van-cell title="擅长风格" size="large" is-link :value="styles?styles:'添加标签'" :value-class="styles?'value-active':''" to="goodatStyle" style="margin-bottom: 0.24rem; border-radius: 0.1rem;"/>
                    <van-cell title="所在区域" size="large" is-link :value="areas?areas:'选择'" :value-class="areas?'value-activeT':''" @click="goEdit('fromRegion',areas)" style="margin-bottom: 0.24rem; border-radius: 0.1rem;"/>
                    <van-cell title="工作年限" size="large" is-link :value="years?years+'年':'选择'" :value-class="years?'value-activeT':''" @click="goEdit('fromYear', years)" style="margin-bottom: 0.24rem; border-radius: 0.1rem;"/>
                    <div>
                        <van-cell-group style="margin-bottom: 0.5rem; border-radius: 0.1rem!import;" v-if="list.length>0">
                            <van-cell value="工作经历">
                                <van-icon slot="right-icon" name="add-o" class="custom-icon" size="0.45rem" @click="addNewExper"/>
                            </van-cell>
                            <div v-for="(item) in list" :key="item.number">
                                <van-cell  @click="editExper(item.uid)">
                                    <div slot="title" class="title-case">{{item.companyName}}</div>
                                    <div slot="label">{{item.beginDate | onlyDate}} - {{item.endDate | onlyDate}}</div>
                                </van-cell>
                            </div>
                        </van-cell-group>
                        <div class="no-jobs"  @click="addNewExper" v-else><span style="font-size: 0.4rem; margin-right: 0.1rem;font-weight: 700;">+ </span> 添加工作经历</div>
                    </div>
                </div>
            </div>
      </div>
    </div>
</template>
<script>
import {getuserUid} from '@/utils/auth.js'
import { mapMutations, mapState } from "vuex";
export default {
  components: {
  },
  data() {
    return {
      title: '我的简介',
      tages: "",
      spaces: "",
      styles: "",
      areas: "",
      years: "",
      allResume: {},
      list: [],
      resumeSkillInfos: [],
      resumeTypesInfos: [],
      resumeStylesInfos: [],
      dataArr: [],
      hasContent: false,
      isSave: false
    }
  },
  created() {
      this.setNewExperience() // 清除之前新简历数据储存
      this.setOldExperience() // 清除之前旧简历数据储存
      this.resumeDetail()
  },
  methods: {
      // 跳转 编辑区域 年限
      goEdit(val,cont) {
          this.$router.push({name: 'performance-regionYear', params:{info:val, content: cont}})
      },
      diffBack() {
          this.$router.push('/performance/personalCenter')
      },
      // 添加旧工作经验
      editExper (id) {
        this.list.forEach((item)=>{
            if(item.uid == id) {
                this.setOldExperience(item)
            }
        })
        this.$router.push({name:'performance-myExperiences'})
      },
      // 添加新工作经验
      addNewExper() {
        this.$router.push({name: 'performance-newExperiences'})
      },
    // 添加简历 - 年限
    async resumeDetail() {
      const SPC = await HTTP("app/resume/resumeDetail", {
          userUid: getuserUid()
      });
      if (SPC.code == 200) {
          this.allResume  = SPC.data
          this.list  = this.allResume.workHistorys
          this.years = this.allResume.workYears?this.allResume.workYears:''
          this.resumeSkillInfos = this.allResume.resumeSkillInfos
          this.resumeTypesInfos = this.allResume.resumeTypesInfos
          this.resumeStylesInfos = this.allResume.resumeStylesInfos
          if (!this.allResume.resumeAreaInfos) {
              this.areas = ""
          } else if (this.allResume.resumeAreaInfos) {
              this.areas = this.allResume.resumeAreaInfos.provinceName+ this.allResume.resumeAreaInfos.cityName+ this.allResume.resumeAreaInfos.areaName
          }
          this.setResumeSkillInfos(this.resumeSkillInfos) // 技能标签
          if (this.resumeSkillInfos.length>0) {
              this.resumeSkillInfos.forEach((item)=>{
                  this.tages += item.skillName+'、'
                })
                if(this.tages) {
                    this.tages = this.tages.substring(0, this.tages.length - 1)
                }
          }
          this.setResumeTypesInfos(this.resumeTypesInfos) // 擅长风格 空间
          if (this.resumeTypesInfos.length>0) {
              this.resumeTypesInfos.forEach((item)=>{
                //   this.spaces += item.typeName+'、'
                if (item.parent == null){
                   this.dataArr.push(item.childs)
                }
               })
               if (this.dataArr.length>0) {
                        for(var i=0;i<this.dataArr.length;i++){
                            let parentA = this.dataArr[i]
                            for(var j=0;j<parentA.length;j++){
                                this.spaces += parentA[j].typeName + '、'
                            }
                        }
                        console.log(this.dataArr)
                   
               }
               if(this.spaces) {
                   this.spaces = this.spaces.substring(0, this.spaces.length - 1)
               }
          }
          this.setResumeStylesInfos(this.resumeStylesInfos) // 风格标签
          if (this.resumeStylesInfos.length>0) {
              this.resumeStylesInfos.forEach((item)=>{
                  this.styles += item.styleName+'、'
                })
                if(this.styles) {
                    this.styles = this.styles.substring(0, this.styles.length - 1)
                }
          }
          this.setAllResume(SPC.data)
      } else {
        this.$toast(SPC.msg || "服务器异常");
      }
    },
    ...mapMutations([ "setAllResume", "setNewExperience","setOldExperience","setResumeSkillInfos","setResumeTypesInfos","setResumeStylesInfos"])
  },
  filters: {
    onlyDate(dateTime) {
        let data = dateTime.replace('00:00:00.0','')
        return data
    }
  }
};
</script>
<style>
.leftCell{
        width: 200px!important;
    }
</style>

<style lang="scss" scoped>
#my-introduction {
    position: absolute;
    width: 100%;
    height: 100%;
    .label-case{
        width: 90%; 
        display: inline-block;
    }
    .title-case{
        width:70%;
        word-wrap: normal; 
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .deposit-content{
        position: relative;
        width: 100%;
        height: 100%;
        .top-bg{
            width: 100%;
            background: #fff;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            .header {
                background: #5E8EFE;
                color: #ffffff;
                height: 0.92rem;
                .title {
                    color: #ffffff;
                    font-size: 0.35rem;
                    }
                .right{
                    font-size: 0.32rem;
                    height: 0.92rem;
                    line-height: 1rem;
                }
            }
        }
        .reset-wrapper{
            position: fixed;
            width: 100%;
            top: 0.92rem;
            left: 0;
            right: 0;
            overflow-y: scroll;
            bottom: 0rem;
            .reset-content{
                width: 100%;
                padding: 0.24rem;
                box-sizing: border-box;
                border-radius: 0.1rem;
                .value-active{
                    width: 180%;
                    color: #5E8EFE;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .value-activeT{
                    color: #282828;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                }
                .no-jobs{
                    width: 100%;
                    background: #FFFFFF;
                    border-radius: 0.1rem;
                    text-align: center;
                    color: #5E8EFE;
                    height: 0.9rem;
                    line-height: 0.9rem;
                    font-size: 0.32rem;
                    font-family: PingFangSC-Semibold;
                    margin-bottom: 0.7rem;
                }
            }
            .btn{
                box-sizing: border-box;
                width: 100%;
                height: 0.88rem;
                padding: 0 0.24rem;
                div{
                    width: 100%;
                    height: 0.88rem;
                    margin-bottom: 0.7rem;
                    line-height: 0.88rem;
                    color: #fff;
                    background: #5E8EFE;
                    font-size: 0.26rem;
                    font-family: PingFangSC-Semibold;
                    font-weight: 600;
                    border-radius: 0.1rem;
                    text-align: center;
                }
            }
        }
    }
    .alert-case{
        height: 2rem;
        line-height: 2rem;
        text-align: center;
    }
}
</style>
